<template>
    <div id="progress-loop" ref="chartDom" style="width: 100%;height: 100%"></div>
</template>
  
  <script setup lang="ts" name="dataScreen">
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import { countSize } from "@/utils/utils";
  import * as echarts from 'echarts';
  const chartDom = ref();
  
  const props = defineProps({
    planData: {
      type: Array,
      default: [],
    },
    text:{
      type: String,
      default: '',
    }
  })
  watch(() => props.planData, (value) => {
    console.log('value',value)
    initChart();
  }, { deep: true });
  let myChart = null;
    const Option = computed(() => {
      return {
        title: {
          text: props.text,
          textStyle: {
            //图例文字的样式
            fontSize:countSize(0.14),
            color: "#fff",
          },
          left: "left",
          top: "0",
        },
        grid: {
          left: "10px",
          right: "10px",
          bottom: "5%",
          top: "8%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c} %",
          axisPointer: {
            type: "none",
          },
        },
        xAxis: [
          {
            show: false,
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize:countSize(0.12),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: props.planData.showName
          },
          {
            //真实数据
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize:countSize(0.12),
              },
              formatter: "{value}%", // 每个刻度添加的文字
              // formatter: function (value) {
              //   if (value >= 10000) {
              //     return (value / 10000).toLocaleString() + "%";
              //   } else {
              //     return value.toLocaleString();
              //   }
              // },
            },
            data: props.planData.numerical,
          },
        ],
        series: [
          {
            name: "产量",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#4693EC",
                  },
                  {
                    offset: 1,
                    color: "#00FFE3",
                  },
                ]),
              },
            },
            barWidth:  countSize(0.16),
            data:props.planData.numerical,
          },
          {
            //占位
            name: "计划",
            type: "bar",
            barWidth: countSize(0.16),
            barGap: "-100%",
            data: props.planData.total,
            itemStyle: {
              normal: {
                color: "rgba(39, 122, 206)",
                barBorderRadius: 30,
              },
            },
          },
        ],
      }
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  